<template>
  <div class="bgc">
    <div class="shop">
      <div class="top">
        <a @click="backStep"><span><i class="iconfont">&#xe65b;</i>{{tip}}</span></a>
        <span>{{set}}</span>
        <el-button @click="drawer = true" class="drawer" >
          <span class="iconfont">&#xe53c;</span>
        </el-button>
      </div>
      <div class="shoptop shoptips">
        <span v-for="(item,index) in titles" :key="index" @click="changeColor(index)" :class="{bot:(index==temp)}">
          {{item}}
        </span>
      </div>
        <div class="body">
          <router-view></router-view>
        </div>
       <el-drawer title="我是标题" :visible.sync="drawer"
        :with-header="false" :direction="direction" :size="size">
        <share></share>
      </el-drawer>
    </div>
    <div class="foot_btn">
      <router-link to="/shopCar/myCart" tag="div" class="car">购物车</router-link>
      <router-link to="/shopCar/order" tag="div" class="order">订单</router-link>
    </div>
  </div>
  
</template>
  
<script>
import Bscroll from 'better-scroll'
import { log } from 'util'
import share from '../shopCar/Shop-child/bodys/pinks/share'

export default {
    name:'Shop',
    components:{
      share
    },
    data(){
      return{
        titles:['精选','清仓特价','零食饮料','产地生鲜'],
        temp:0,
        tip:'裹裹购',
        share:'•••',
        set:'㊣正品清仓 ☹天天折扣 ☢全场包邮',
        // isshow:false,
        drawer: false,
        direction:'btt',
        scroll:null,
        size:'20%'
      }
    },
    // mounted(){
    //   this.scroll = new Bscroll(document.querySelector('.content'),{
    //   });
    // },
    methods:{
      changeColor(index){
        this.temp = index;
        switch (index){
          case 0 : this.$router.push('/shopCar/cngg/ggg/main');break;
          case 1 : this.$router.push('/shopCar/cngg/ggg/goods');break;
          case 2 : this.$router.push('/shopCar/cngg/ggg/snacks');break;
          case 3 : this.$router.push('/shopCar/cngg/ggg/fruit');break;
        }
      },
    backStep(){
      this.$router.push('/index');
    },
    // toggle(){
    //   this.isshow = !this.isshow;
    // }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/shopCarIconfont/iconfont.css';
@import '../../assets/userIconFont/iconfont.css';
@import '../../style/shopCar/shop.scss';
span>i{
  font-size: 5vw!important;
}
.drawer{
  background-color: #e72636ff;
  height: 5vh;
  border: 0;
  span{
    color: #fff!important;
    font-size: 5vw!important;
  }
}
</style>